<template>
   <div class="aside" :style="{width:isOpen? '80px':'200px'}">
          <h2>后台管理系统 </h2> 
            <!--v-model:openKeys="state.openKeys"  openKeys: 当前展开的 SubMenu 菜单项 key 数组 -->
            <a-menu
            v-model:selectedKeys="state.selectedKeys"
            mode="inline"
            theme="light"
            :inline-collapsed="isOpen"
            :items="items"
            @click="handlerFun"
            ></a-menu> 
        </div>
</template>

<script lang='ts' setup>
import { reactive,ref, h, onMounted} from 'vue'
import {
  PieChartOutlined,
  DesktopOutlined,
  InboxOutlined
} from '@ant-design/icons-vue';

const props = defineProps({
    isOpen:Boolean
})
import { useRouter,useRoute } from 'vue-router'

const router = useRouter();
const route = useRoute();
const state = reactive({
  selectedKeys: [route.path]
});
const items = reactive([
  {
    key: '/layout/address',   // 唯一性
    icon: () => h(PieChartOutlined),
    label: '地址管理',
    title: '地址管理',
  },
  {
    key: '/layout/admin',
    icon: () => h(DesktopOutlined),
    label: '管理员管理',
    title: '管理员管理',
  },
   {
    key: '/layout/question',
    icon: () => h(DesktopOutlined),
    label: '问题管理',
    title: '问题管理',
  },
  {
    key: '/layout/bank',
    icon: () => h(InboxOutlined),
    label: '银行管理',
    title: '银行管理'
  },
   {
    key: '/layout/user',
    icon: () => h(InboxOutlined),
    label: '用户管理',
    title: '用户管理'
  },
   {
    key: '/layout/reserve',
    icon: () => h(InboxOutlined),
    label: '预约管理',
    title: '预约管理'
  },
   {
    key: '/layout/knowledge',
    icon: () => h(InboxOutlined),
    label: '知识管理',
    title: '知识管理'
  },
   {
    key: '/layout/expert',
    icon: () => h(InboxOutlined),
    label: '专家管理',
    title: '专家管理'
  },

]);

onMounted(()=>{

 
})

const handlerFun = (data:any)=>{
    router.push(data.key)
}

</script>

<style lang='scss' scoped>
    .aside {
        // width: 200px;
        // width:80px;
        border-right: 1px solid #000;
        overflow: hidden;
        flex-shrink:0; // 不压缩
        h2 {
          font-size: 18px;
          padding: 10px;
          
        }
    }
</style>